<template>
  <div class="s1">
    <!-- 第一层：标题和描述 -->
    <div class="s1-header">
      <div id="s1-header-photo">
        <img src="./img/山-remove.png" alt="" width="100" height="100" />
        <img src="./img/河-remove.png" alt="" width="100" height="100" />
      </div>
      <div id="s1-header-p">
        <p style="line-height: 30px">
          欢迎访问山河平台。山河是一个专业的心理评估与服务平台，
          专注于研发多样化的心理测试工具，
          旨在帮助用户深入认识自身的心理状况与行为模式，
          并获得丰富的心理健康资源。
        </p>
      </div>
    </div>

    <!-- 第二层：登录卡片信息 -->
    <div class="s1-images">
      <Login
        keyNumber="1"
        imgSrc="https://psystatic.fenxapp.com/images/console/undraw_Mobile_app_re_catg.png"
        noteText="个人登录"
        @open-personal-login="openPersonalLoginDialog"
      ></Login>
      <Login
        keyNumber="2"
        imgSrc="https://psystatic.fenxapp.com/images/console/undraw_Dashboard_re_3b76.png"
        noteText="机构登录"
        @open-institution-login="openInstitutionLoginDialog"
      ></Login>
    </div>

    <!-- 个人登录弹窗 -->
    <el-dialog
      v-model="isPersonalLoginDialogVisible"
      width="350px"
      :draggable="true"
      :center="true"
      :style="{ borderRadius: '20px', border: '5px solid rgba(1,1,1,0.1)' }"
      style="transform: translate(0%, 55%)"
      close-icon="CloseBold"
    >
      <template #header>
        <!-- 标题 -->
        <div class="custom-header">
          <span style="font-size: x-large">个人登录</span>
        </div>
      </template>

      <!-- 主体部分,使用了表单容器 -->
      <el-form ref="loginForm" :model="loginForm">
        <!-- 用户账号输入框 -->
        <el-form-item class="el-form-item">
          <el-input
            v-model="userName"
            prefix-icon="User"
            placeholder="账号"
            size="large"
            clearable
            style="width: 230px"
            @keyup.enter="focusPersonPassword"
          />
        </el-form-item>

        <!-- 密码 -->
        <el-form-item class="el-form-item">
          <el-input
            v-model="passWord"
            prefix-icon="Lock"
            placeholder="密码"
            size="large"
            clearable
            show-password
            style="width: 230px"
            ref="passwordInput1"
            @keyup.enter="handlePersonalLogin"
          />
        </el-form-item>
      </el-form>

      <!-- 底部按钮 -->
      <template #footer>
        <div class="dialog-footer">
          <el-button
            @click="isPersonalLoginDialogVisible = false"
            size="large"
            style="min-width: 90px"
            >取消</el-button
          >
          <el-button
            type="primary"
            @click="handlePersonalLogin"
            size="large"
            style="min-width: 90px"
            >登录</el-button
          >
        </div>
      </template>
    </el-dialog>

    <!-- 机构登录弹窗 -->
    <el-dialog
      v-model="isInstitutionLoginDialogVisible"
      width="350px"
      :draggable="true"
      :center="true"
      :style="{ borderRadius: '20px', border: '5px solid rgba(1,1,1,0.1)' }"
      style="transform: translate(0%, 55%)"
      close-icon="CloseBold"
    >
      <template #header>
        <!-- 标题 -->
        <div class="custom-header">
          <span style="font-size: x-large">机构登录</span>
        </div>
      </template>

      <!-- 主体部分,使用了表单容器 -->
      <el-form ref="loginForm" :model="loginForm">
        <!-- 用户账号输入框 -->
        <el-form-item class="el-form-item">
          <el-input
            v-model="userName"
            prefix-icon="User"
            placeholder="账号"
            size="large"
            clearable
            style="width: 230px"
            @keyup.enter="focusInstitutionPassword"
          />
        </el-form-item>

        <!-- 密码 -->
        <el-form-item class="el-form-item">
          <el-input
            v-model="passWord"
            prefix-icon="Lock"
            placeholder="密码"
            size="large"
            clearable
            show-password
            style="width: 230px"
            ref="passwordInput2"
            @keyup.enter="handleInstitutionLogin"
          />
        </el-form-item>
      </el-form>

      <!-- 底部按钮 -->
      <template #footer>
        <div class="dialog-footer">
          <el-button
            @click="isInstitutionLoginDialogVisible = false"
            size="large"
            style="min-width: 90px"
            >取消
          </el-button>
          <el-button
            type="primary"
            @click="handleInstitutionLogin"
            size="large"
            style="min-width: 90px"
            >登录</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { ref } from "vue";
import { useRouter } from "vue-router";
import Login from "./components/LoginCard.vue";

const router = useRouter();

const userName = ref("");
const passWord = ref("");

const InstitutionUserName = ref("");
const InstitutionPassWord = ref("");

/* 实现回车键跳转输入框、验证 */
const passwordInput1 = ref(null);
const passwordInput2 = ref(null);
const focusPersonPassword = () => {
  passwordInput1.value.focus();
};
const focusInstitutionPassword = () => {
  passwordInput2.value.focus();
};

/* 登录框显示 */
const isPersonalLoginDialogVisible = ref(false);
const isInstitutionLoginDialogVisible = ref(false);

const loginForm = ref({
  username: "",
  password: "",
});

/* 登录框可见性 */
const openPersonalLoginDialog = () => {
  isPersonalLoginDialogVisible.value = true;
};

const openInstitutionLoginDialog = () => {
  isInstitutionLoginDialogVisible.value = true;
};

/* 处理个人登录 */
const handlePersonalLogin = () => {
  // 模拟账号、密码
  const validUsername = "person";
  const validPassword = "1234";

  if (userName.value === validUsername && passWord.value === validPassword) {
    // 成功
    router.push("/psy/preview");
    /* 清除账号、密码 */
    userName.value = null;
    passWord.value = null;
    isPersonalLoginDialogVisible.value = false;
    ElMessage.success("个人登录成功！");
  } else {
    // 失败，显示警告对话框
    ElMessage.error("账号或密码错误");
  }
};

/* 处理机构登录 */
const handleInstitutionLogin = () => {
  // 模拟账号、密码
  const validUsername = "institution";
  const validPassword = "1234";

  if (userName.value === validUsername && passWord.value === validPassword) {
    // 成功
    router.push("/psy/preview");
    /* 清除账号、密码 */
    userName.value = null;
    passWord.value = null;
    isInstitutionLoginDialogVisible.value = false;
    ElMessage.success("机构登录成功！");
  } else {
    // 失败，显示警告对话框
    ElMessage.error("账号或密码错误");
  }
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

/* 整体 */
.s1 {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  padding: 3rem;
  padding-bottom: 15rem;
  background-image: url("./img/orangeColor.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* 登录页面的标题、介绍 */
.s1-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  text-align: center;
}

/* 页面介绍 */
#s1-header-p {
  width: 50%;
  height: auto;
  padding-bottom: 2rem;
  font-size: 1.1rem;
}

/* 登录选项卡片 */
.s1-images {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* "登录"标题 */
.custom-header {
  position: relative;
  justify-content: center;
  width: 100%;
  margin-top: 15px;
  margin-left: 6%;
}

/* 表单的单个项目 */
.el-form-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px;
}

/* 登录弹窗按钮 */
.dialog-footer {
  margin-bottom: 15px;
}

@media screen and (width <= 1140px) {
  .el-button {
    min-width: 70px;
  }
}

@media screen and (width <= 660px) {
  .s1 {
    height: 220%;
  }
}

@media screen and (width <= 550px) {
  .el-button {
    min-width: 45px;
  }
}
</style>
